<style lang="scss">
    @import 'index';
</style>
<style type="text/css">
    .backfff{background: #fff !important;}
</style>

<template>
    <div class="ga-container">
        <div class="ga-product-detail">
            <!-- 顶部swiper -->
            <div>
                <swiper
                        :indicator-dots="swiper.indicatorDots"
                        :autoplay="swiper.autoplay"
                        :interval="swiper.interval"
                        :duration="swiper.duration"
                        indicator-color="white"
                        indicator-active-color="#ff3a35">
                    <block v-for="(item,index) in swiper.imgUrls"  :key="index">
                        <swiper-item>
                            <image mode="aspectFit" :src="item" class="slide-image"/>
                        </swiper-item>
                    </block>
                </swiper>
            </div>

            <!--第二件半价 || 秒杀价 || 新鲜预售satrt-->
            <div class="ga-cell top-box">
              <div class="item">
                <div class="box">
                  <span class="em">秒杀价</span>
                  <span class="span2">¥</span>
                  <span class="span3">{{data.price}}</span>
                  <span class="throughLine mt10">¥{{data.shop_price}}</span>
                </div>

                <div class="num">已抢{{data.seckill_num}}件</div>
              </div>
            </div>

            <!--秒杀 start-->
            <div class="special-cell">
              <i class="gaIcon clock"></i>
              <span class="span1">限时秒杀</span>
              <span class="span2">{{data.title}}</span>
            </div>
            <!--秒杀 end-->


            <div class="ga-cell mark-box">
                <div class="item">
                    <ul class="mark-list clearfix">
                        <li v-for="(item,index) in data.goods_lebel" :key="index"><i class="dot"></i>{{item}}</li>
                    </ul>

                    <span class="dots">...</span>
                </div>
            </div>


            <!--拼团推荐-->
            <h2 class="h2 mt10">秒杀推荐</h2>
            <ul class="ga-bargain-list">
                <li class="item" v-for="(item,index) in likelist" :key="index">
                  <a :href="'../SeckillDetail/main?id='+item.seid">
                    <div class="img-box">
                      <img class="img" :src="item.icon" alt="">
                    </div>
                    <div class="con-box">
                      <p class="p1">{{item.title}}</p>
                      <p class="p2">
                        <span class="f30 gOrange">¥{{item.price}}</span>
                        <span>已抢{{item.seckill_num}}件</span>
                      </p>
                    </div>
                  </a>
                </li>
            </ul>

            <!--详情内容-->
            <div class="pro-detail mt10">
                <div v-html="data.goods_desc" class="imgbox"></div>
            </div>

            <!--固定fixed底部-->
            <div class="ga-bottom-fixed">
                <div class="bottom">
                    <!--tabs-->
                    <ul class="tabs">
                        <li class="item">
                            <a @click="bindSwitchTab('../home/main')">
                                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon1.png" alt="">
                                <p>首页</p>
                            </a>
                        </li>
                        <!-- <li class="item">
                            <a href="#">
                                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/star.png" alt="">
                                <p>收藏</p>
                            </a>
                        </li> -->
                        <li class="item">
                            <a @click="bindSwitchTab('../shopCart/main')">
                                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                                <p>购物车</p>
                            </a>
                        </li>
                    </ul>

                    <div class="btn-box">
                        <!--(1)售罄-->
                        <!--<a href="#" class="btn btn">
                          <p>已售击</p>
                          <p>去首页看看</p>
                        </a>-->

                        <!--(2)开团-->
                        <a href="#" class="btn btn1 backfff">
                            <!-- <p>加入购物车</p> -->
                        </a>
                        <!--说明：未开团
                          禁止点击:disable
                        -->
                        <a @click="goseckill" class="btn btn2" :class="{'disable':isSet}">
                            <p class="mt10">¥ {{data.price}}</p>
                            <p>一键秒杀</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {isLogin} from '@/utils/handleLogin'
    export default {
        data () {
            return {
                swiper: {
                    imgUrls: [],
                    indicatorDots: true,
                    autoplay: true,
                    interval: 5000,
                    duration: 1000
                },
                data: [],
                likelist: [],
                isSet: false
            }
        },
        methods: {
            /** 接口数据 */
            async load () {
                this.$_util.ajax.get('https://guo-a.com/mapi/seckill/getdetail?id=' + this.$root.$mp.query.id).then((res) => {
                    if(res.code === 200){
                        this.swiper.imgUrls = res.data.atlas
                        if (res.data.hasOwnProperty('goods_desc')) {
                            res.data.goods_desc = this.formatImg(res.data.goods_desc)
                        }
                        this.data = res.data
                    }
                })
                this.$_util.ajax.post('https://guo-a.com/mapi/seckill/getlike',{skill_id:this.$root.$mp.query.id}).then((res) => {
                    console.log(res)
                    if(res.code === 200){
                      this.likelist = res.data
                    }
                })
                let params = {
                    id: this.$root.$mp.query.id
                }
                this.$_util.ajax.post('https://guo-a.com/mapi/seckill/check?token=' + this.$store.state.Token,params).then((res) => {
                    if(res.code === 200){
                        this.isSet = res.data
                    }
                })
            },
            async goseckill () {
                console.log(this.isSet)
                if(this.isSet){
                    return false
                }
                this.bindNavigateTo('../confirmseckill/main?id=' + this.$root.$mp.query.id)

            },
            /** 转换富文本编辑器里面图片的大小自适应*/
            formatImg (str) {
                if (!str) {
                    return str
                }
                return str.replace(/<img/gi, '<img style="max-width:100%;height:auto" ')
            },
            /**
             * 路由跳转
             */
            bindNavigateTo (url) {
                wx.navigateTo({
                    url
                })
            },
            bindSwitchTab (url) {
                wx.switchTab({
                    url
                })
            }
        },

        onShow () {
            isLogin(()=>{
                this.load()
            })
        },
        mounted () {
            
        }
    }
</script>
